<template>
  <div class="settings-container">
    <el-card class="settings-info">
      <template #header>
        <div class="card-header">
          <span>【挂机设置】 当前位置：{{ currentLocation }}</span>
        </div>
      </template>
      
      <div>
        <div class="settings-section" v-for="(section, index) in settingSections" :key="section.title" :data-index="index">
          <h3>{{ section.title }}</h3>
          <component 
            :is="section.component" 
            v-model="settings[section.model]" 
            v-bind="section.props || {}"
          >
            <template v-if="section.options">
              <el-option 
                v-for="option in section.options" 
                :key="option.value" 
                :label="option.label" 
                :value="option.value" 
              />
            </template>
            <template v-else-if="section.checkboxes">
              <el-checkbox 
                v-for="checkbox in section.checkboxes" 
                :key="checkbox.label" 
                :label="checkbox.label"
              />
            </template>
          </component>
        </div>
      </div>
      
      <div class="settings-section">
        <h3>挂机进度</h3>
        <el-progress 
          :percentage="progress" 
          :stroke-width="20" 
        />
        <p>预计完成：{{ estimatedCompletion }}分钟后</p>
      </div>
      
      <div class="settings-actions">
        <el-button 
          v-if="!isIdle" 
          type="primary" 
          @click="startIdle" 
          :disabled="isIdle"
        >
          开始挂机
        </el-button>
        <el-button 
          v-else 
          @click="stopIdle" 
          :disabled="!isIdle"
        >
          停止挂机
        </el-button>
        <el-button 
          v-if="isIdle" 
          @click="stopIdle" 
          :disabled="!isIdle"
        >
          停止挂机
        </el-button>
        <el-button 
          v-else 
          type="primary" 
          @click="startIdle" 
          :disabled="isIdle"
        >
          开始挂机
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'

export default {
  name: 'Settings',
  setup() {
    const currentLocation = ref('青云山脚')
    const isIdle = ref(false)
    const progress = ref(90)
    const estimatedCompletion = ref(5)

    const settings = reactive({
      mode: 'exploration',
      battleStrategy: 'weakness',
      treasures: ['自动使用回血丹'],
      autoFunctions: ['自动静修', '自动探索', '自动战斗']
    })

    // 设置区段配置
    const settingSections = computed(() => [
      {
        title: '挂机模式',
        component: 'el-radio-group',
        model: 'mode',
        props: {},
        radios: [
          { label: 'exploration', text: '自动探索' },
          { label: 'cultivation', text: '自动修炼' },
          { label: 'battle', text: '自动战斗' }
        ]
      },
      {
        title: '战斗策略',
        component: 'el-select',
        model: 'battleStrategy',
        props: { placeholder: '请选择战斗策略' },
        options: [
          { label: '优先攻击弱点', value: 'weakness' },
          { label: '平均分配攻击', value: 'balanced' },
          { label: '集中攻击一个目标', value: 'focus' }
        ]
      },
      {
        title: '法宝使用',
        component: 'el-checkbox-group',
        model: 'treasures',
        checkboxes: [
          { label: '自动使用回血丹' },
          { label: '自动使用回蓝丹' },
          { label: '自动使用筑基丹' }
        ]
      },
      {
        title: '自动功能',
        component: 'el-checkbox-group',
        model: 'autoFunctions',
        checkboxes: [
          { label: '自动静修' },
          { label: '自动探索' },
          { label: '自动战斗' },
          { label: '自动突破' }
        ]
      }
    ])

    const startIdle = () => {
      isIdle.value = true
      console.log('开始挂机')
      // 这里应该添加实际开始挂机的逻辑
    }

    const stopIdle = () => {
      isIdle.value = false
      console.log('停止挂机')
      // 这里应该添加实际停止挂机的逻辑
    }
    
    return {
      currentLocation,
      isIdle,
      progress,
      estimatedCompletion,
      settings,
      settingSections,
      startIdle,
      stopIdle
    }
  }
}
</script>

<style scoped>
.settings-container {
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-scrollbar: none; /* Chrome, Safari and Opera */
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 70px; /* 为底部导航留出空间 */
  padding-top: 50px; /* 为顶部状态栏留出空间 */
}

.card-header {
  font-weight: bold;
}

.settings-section {
  margin-bottom: 20px;
}

.settings-section h3 {
  margin-bottom: 10px;
}

.settings-actions {
  text-align: center;
  margin-top: 30px;
}

.settings-actions .el-button {
  margin: 0 10px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .settings-container {
    padding: 10px;
    padding-bottom: 70px; /* 为底部导航留出空间 */
    padding-top: 45px; /* 为顶部状态栏留出空间 */
  }
  

  
  .el-card__header,
  .el-card__body {
    padding: 12px;
  }
  
  .settings-section {
    margin-bottom: 15px;
  }
  
  .settings-actions {
    margin-top: 20px;
  }
  
  .settings-actions .el-button {
    display: block;
    width: 100%;
    margin: 5px 0;
  }
}

@media screen and (max-width: 480px) {
  .settings-container {
    padding-top: 40px; /* 为顶部状态栏留出空间 */
  }
  
  .el-card__header,
  .el-card__body {
    padding: 10px;
  }
  
  .settings-section {
    margin-bottom: 10px;
  }
  
  .settings-actions {
    margin-top: 15px;
  }
  
  .settings-actions .el-button {
    display: block;
    width: 100%;
    margin: 5px 0;
  }
}

/* 移除了所有动画样式 */
</style>